<template>
	<view>
		<!-- <view class="" style="position: fixed;top: 0rpx;left: 0rpx;right: 0rpx;width: 100%;height: 580rpx;background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.2));z-index: 0;">
			
		</view> -->
		<view class="xm-flex-c xm-padding-30r" style="color: #FFFFFF;box-sizing: border-box;width: 100%;height: 580rpx;background-color: #AAAAAA;background-image: url('https://img0.baidu.com/it/u=3276907380,3196236951&fm=26&fmt=auto');z-index: -2;">
			
			<view class="" style="flex: 1;align-self: stretch;">
			</view>
			<view class="xm-flex-r xm-padding-30r" style="width: 100%;height: 300rpx;">
				<!-- background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); -->
				
				<view class="xm-flex-c xm-justify-between" style="width: 170rpx;height: 100%;position: relative;">
					<view class="" style="width: 170rpx;border-radius: 50%;height: 170rpx;background-color: #26ACD4;border: 4rpx #FFFFFF solid;">
						<image v-if="top_icon!=''" :src="top_icon"  @click="open(1)"  style="width: 170rpx;border-radius: 50%;height: 170rpx;" mode="aspectFill"></image>
					</view>
					
					<view class="" style="width: 40rpx;height: 40rpx;position: absolute;right: 20rpx;top: 140rpx;background-color: #FFFFFF;border-radius: 50%;">
						<image v-show="data!=undefined?(data.sex==0):false" src="../../static/images/icon/man.png" mode="widthFix" style="width: 40rpx;border-radius: 50%;"></image>
						<image v-show="data!=undefined?(data.sex==1):false" src="../../static/images/icon/wman.png" mode="widthFix" style="width: 40rpx;border-radius: 50%;"></image>
					</view>
					
					<view class="">
						{{data!=undefined?data.user_name:'暂未登陆'}}
					</view>
				</view>
				    
				<view class="xm-flex-c xm-justify-between" style="flex: 1;margin-left: 30rpx;">
					<view class="" style="flex: 1;">
						
					</view>
					<view class="" style="margin-bottom: 60rpx;">
						id : {{data!=undefined?data.user_id:'~ ~ ~'}}
					</view>
					<!-- <view class="" style="margin-top: 30rpx;margin-bottom: 30rpx;">
						账号 : {{data!=undefined?data.user_accountnumber:'~ ~ ~'}}
					</view> -->
					<view class="">
						今日心情 : {{data!=undefined?(data.user_mood!=undefined?data.user_mood:'未设置心情'):'~ ~ ~'}}
					</view>
				</view>
			</view>
			<view class="xm-padding-30r xm-flex-r xm-justify-between" style="box-sizing: border-box;width: 100%;height: 134rpx;border-radius: 30rpx;margin-bottom: -80rpx;background:linear-gradient(to right,#ffcfe2,#7b9eb8,#ebb3bf);">
				<view v-show="id!=-1" @click="$api.gotoType('to','../mylist/addmemoryfragment?id='+id)" class="" style="height: 74rpx;line-height:74rpx;">
					添加记忆碎片
				</view>
				<view class="">
					<view v-if="id==-1" class="" @click="topage('to','./login/login')" style="height: 74rpx;line-height:74rpx;width: 147rpx;text-align: center;border: #FFFFFF 2rpx solid;border-radius: 20rpx;">
						登录
					</view>
					<view  v-if="id!=-1" class="" @click="tuichulogin()" style="height: 74rpx;line-height:74rpx;width: 147rpx;text-align: center;border: #FFFFFF 2rpx solid;border-radius: 20rpx;">
						退出登录
					</view>
				</view>
				
			</view>
			
		</view> 
		
		<view class="xm-flex-c xm-padding-30r" style="width: 100%;height: auto;margin-top: 50rpx;color: #ffffff;">
			
			<view v-if="id!=-1" @click="$api.gotoType('tab','../mylist/mylist')" class="itamsty xm-flex-r xm-justify-between" style="">
				<view class=" xm-fontsize-20">
					我的记忆碎片
				</view>
				<image src="../../static/images/icon/back.png" style="width: 50rpx;" mode="widthFix"></image>
			</view>
			
			<view v-if="id!=-1" @click="$api.gotoType('to','./updatepasswrodpage/updatepasswrodpage')" class="itamsty xm-flex-r xm-justify-between">
				<view class=" xm-fontsize-20">
					修改密码
				</view>
				<image src="../../static/images/icon/back.png" style="width: 50rpx;" mode="widthFix"></image>
			</view>
			
			<view v-if="id!=-1" @click="topage('to','./psifmtiom/psifmtiom')" class="itamsty xm-flex-r xm-justify-between">
				<view class=" xm-fontsize-20">
					编辑个人信息
				</view>
				<image src="../../static/images/icon/back.png" style="width: 50rpx;" mode="widthFix"></image>
			</view>
			
			<!-- <view v-if="id!=-1" @click="open(2)" class="itamsty xm-flex-r xm-justify-between">
				<view class=" xm-fontsize-20">
					提议与谏言
				</view>
				<image src="../../static/images/icon/back.png" style="width: 50rpx;" mode="widthFix"></image>
			</view> -->
			
			<view v-if="id==-1" @click="topage('to','./login/login')" class="xm-flex-r xm-justify-center" style="align-items: center;border-radius: 20rpx;background: linear-gradient(to left,#00ff7f,#5fbdad);box-sizing: border-box;width: 100%;height: 80rpx;line-height: 80rpx;padding-left: 30rpx;padding-right: 20rpx;margin-bottom: 30rpx;">
				<view class="xm-fontsize-20" style="color: #FFFFFF;font-size: 40rpx;">
					登录解锁更多功能
				</view>
				<!-- <image src="../../static/images/icon/back.png" style="width: 50rpx;" mode="widthFix"></image> -->
			</view>
			<!-- <view class="xm-flex-r xm-justify-between" style="align-items: center;border-radius: 20rpx;background: linear-gradient(to right,#a8a8a8,#9ecada);box-sizing: border-box;width: 100%;height: 80rpx;margin-left: auto;text-align: center;line-height: 80rpx;margin-bottom: 30rpx;color: #FFFFFF;font-size: 30rpx;">
				<view class="xm-fontsize-20" style="flex: 1;font-size: 30rpx;">
					退出登录
				</view>
			</view> -->
		</view>
	<view class="">
		<uni-popup v-if="typePP==1" ref="popup" :mask-click="false">
			<view class="xm-padding-30r"
				style="width:600rpx;height:auto;background-color: #FFFFFF;border-radius: 20rpx;">
				<image :src="top_icon" style="width: 100%;" mode="widthFix"></image>
			</view>
			<!-- <button @click="close">关闭</button> -->
		</uni-popup>
		<uni-popup v-if="typePP==2" ref="popup" :mask-click="false">
			<view class="xm-padding-30r"
				style="width:600rpx;height:auto;background-color: #FFFFFF;border-radius: 20rpx;background: url('http://120.76.135.239:9439/xmdata/images/303.jpg');">
				<!-- <image :src="$url.apitop+'/pay.png'" style="width: 100%;" mode="widthFix"></image> -->
				<view class="xm-flex-c xm-padding-30r" style="width: 100%;height: 600rpx;color: #FFFFFF;">
					<view class="xm-flex-r">
						标题：
						<input type="text" maxlength="10" value="" placeholder="请输入标题(max10)" style="margin-left: 20rpx;border-bottom: 2rpx #FFFFFF solid;padding-left: 20rpx;"/>
					</view>
					<view class="xm-fontsize-25" style="margin-top: 30rpx;">
						正文
					</view>
					<textarea value="" class="xm-fontsize-25 xm-padding-20r xm-border-box" style="height:320rpx; margin-top: 30rpx;width: 100%;border: 4rpx #c1c1c1 solid;border-radius: 20rpx;" placeholder="请输入正文." />
				
					<view class="xm-border-box xm-flex-r xm-justify-between" style="margin-top: 30rpx;width: 100%;height: 50rpx;line-height: 50rpx;">
						<view class="xm-fontsize-25" @click="close()" style="width: 100rpx;border: 2rpx #FFFFFF solid;border-radius: 10rpx;text-align: center;">
							取消
						</view>
						<view class="xm-fontsize-25" @click="upsubmmit()" style="width: 100rpx;border: 2rpx #FFFFFF solid;border-radius: 10rpx;text-align: center;">
							提交
						</view>
					</view>
				</view>
			</view>
			<!-- <button @click="close">关闭</button> -->
		</uni-popup>
	</view>
	

	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:undefined,
				id:undefined,
				top_icon:"",
				typePP:1
			}
		},
		// onLoad() {
			// uni.getStorage({
			// 	key:"token",
			// 	success:data=>{
			// 		console.log(data.data);
			// 		this.id=data.data
			// 	}
			// })
			// this.findon()
		// },
		onShow() {
			uni.getStorage({
				key:"token",
				success:data=>{
					console.log(data.data);
					this.id=data.data
					this.findon()
				}
			})

		},
		methods: {
			open(data) {
				this.typePP = data
				this.$refs.popup.open('top')
			},
			close() {
				this.$refs.popup.close()
			},
			tologin(){
				// console.log("asd");
				this.$api.gotoType("to",'login/login')
		
			},
			// 提交建议
			upsubmmit(){
				this.$api.msg("感谢你对app的支持与建议。")
				this.close()
			},
			findon(){
				if(this.id==undefined){
					this.$api.msg("暂未登陆")
					return false
				}
				console.log("ads");
				this.$http(this.$url.user.findone, "post",
				{
					user_id:this.id,
					}, {
					'content-type': 'application/json'
				}).then(res=>{
					this.data = res.data
					if(this.data.top_icon!=undefined){
						this.top_icon = this.data.top_icon
					}
					console.log(this.data);
				}).catch(err=>{
					// this.$api.msg("网路异常，或无网络")
				})
			},
			topage(type,url){
				console.log("asd");
				this.$api.gotoType(type,url)
			},
			tuichulogin(){
				var that = this
				uni.showModal({
					content: '确定退出登录吗？',
					success: function (res) {
						if (res.confirm) {
							uni.setStorage({
								key:"token",
								data:-1
							})
							
							that.id = -1
							that.data = undefined
							that.top_icon = ""
						} else if (res.cancel) {
							
						}
					}
				});
				
			}
		}
	}
</script>

<style>

	page{
		/* background-color: #eaeaea; */
	}
	.itamsty{
		align-items: center;
		border-radius: 20rpx;
		background: linear-gradient(to right,#97b8d4,#e3c3c9,#bdbdbd);
		box-sizing: border-box;width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 30rpx;
		padding-right: 20rpx;
		margin-bottom: 30rpx;
	}
</style>
